<!-- z-paging聊天item -->

<template>
	<view class="chat-item" style="transform: scaleY(-1);" >
		<text class="chat-time" v-if="item.time&&item.time.length">
			{{item.time}}
		</text>
		<view :class="{'chat-container':true,'chat-location-me':item.isMe}">
			<view class="chat-icon-container">
				<image class="chat-icon" :src="item.icon" mode="aspectFill" />
			</view>
			<view class="chat-content-container">
				<text :class="{'chat-user-name':true,'chat-location-me':item.isMe}">
					{{item.name}}
				</text>
				<view class="chat-text-container-super" :style="[{justifyContent:item.isMe?'flex-end':'flex-start'}]">
					<view :class="{'chat-text-container':true,'chat-text-container-me':item.isMe}">
						<!-- <text :class="{'chat-text':true,'chat-text-me':item.isMe}">{{item.content}}</text> -->
						<text :class="{'chat-text':true,'chat-text-me':item.isMe}">
							<mp-html :content="item.content" />
						  <!-- <zero-markdown-view :markdown="item.content" :loading="loading" @ready="onMarkdownReady"></zero-markdown-view> -->
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html"
	import { marked } from "marked"
	import hljs from "highlight.js"
	import "highlight.js/scss/atom-one-dark.scss"
	export default {
		components: {
			mpHtml
		},
		name:"chat-item",
		props: {
			item: {
				type: Object,
				default: function() {
					return {
						time: '',
						icon: '',
						name: '',
						content: '',
						isMe: false
					}
				}
			}
		},
		data() {
			return {
				loading: false
			};
		},
		mounted() {
			this.initHighLight()
		},
		watch: {
			item: {
				handler(newVal, oldVal) {
					console.log('myVariable 的值从', oldVal, '变为了', newVal);
					newVal.content = marked(newVal.content).replace(/<pre>/g, "<pre class='hljs'>")
				},
				deep: true
			}
		},
		methods: {
			initHighLight() {
				hljs.configure({
					useBR: true,
					tabReplace: " ",
				});
				marked.setOptions({
					renderer: new marked.Renderer(),
					gfm: true,
					tables: true,
					breaks: false,
					pedantic: false,
					highlight: function(code, lang) {
						if (lang && hljs.getLanguage(lang)) {
							return hljs.highlight(lang, code, true).value;
						} else {
							return hljs.highlightAuto(code).value;
						}
					},
				});
			},
		}
	}
</script>

<style scoped>
	.chat-item {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}
	.chat-time {
		padding: 4rpx 0rpx;
		text-align: center;
		font-size: 22rpx;
		color: #aaaaaa;
	}
	.chat-container {
		display: flex;
		flex-direction: row;
	}
	.chat-location-me {
		flex-direction: row-reverse;
		text-align: right;
	}
	.chat-icon-container {
		margin-top: 12rpx;
	}
	.chat-icon{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #eeeeee;
	}
	.chat-content-container {
		margin: 0rpx 15rpx;
	}
	.chat-user-name{
		font-size: 26rpx;
		color: #888888;
	}
	.chat-text-container {
		text-align: left;
		background-color: #f1f1f1;
		border-radius: 8rpx;
		padding: 10rpx 15rpx;
		margin-top: 10rpx;
		/* #ifndef APP-NVUE */
		max-width: 500rpx;
		/* #endif */
	}
	.chat-text-container-me {
		background-color: #007AFF;
	}
	.chat-text-container-super {
		display: flex;
		flex-direction: row;
	}
	.chat-text {
		font-size: 28rpx;
		/* #ifndef APP-NVUE */
		word-break: break-all;
		/* #endif */
		/* #ifdef APP-NVUE */
		max-width: 500rpx;
		/* #endif */
	}
	.chat-text-me {
		color: white;
	}
</style>